<template>
  <div class="product-card">
    <a :href="`/product/${product.id}`" class="product-link">
      <!-- 商品图片容器 -->
      <div class="image-container">
        <img :src="product.image" :alt="product.title" class="product-image">
      </div>
      
      <!-- 商品信息 -->
      <div class="product-info">
        <!-- 商品标题 -->
        <h3 class="product-title">
          <span class="a-truncate" data-lines="2">{{ product.title }}</span>
        </h3>
        
        <!-- 商品价格 -->
        <div class="price-block">
          <span class="currency">￥</span>
          <span class="whole-number">{{ Math.floor(product.price) }}</span>
          <span class="decimal">{{ getDecimal(product.price) }}</span>
        </div>

        <!-- Prime标识 -->
        <div class="prime-info" v-if="product.isPrime">
          <i class="prime-icon"></i>
          <span class="prime-text">Prime</span>
        </div>
      </div>
    </a>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

/**
 * 商品卡片组件
 * 用于展示单个商品信息，包括：
 * - 商品图片
 * - 商品标题
 * - 商品价格
 * - Prime标识（如果有）
 * - 商品评分（如果有）
 * 主要用在热门商品、限时秒杀、推荐商品等区域
 */

export default defineComponent({
  name: 'ProductCard'
})
</script>

<script setup lang="ts">
interface Product {
  id: number
  title: string
  price: number
  image: string
  isPrime?: boolean
}

defineProps<{
  product: Product
}>()

const getDecimal = (price: number) => {
  return (price % 1).toFixed(2).substring(1)
}
</script>

<style lang="scss" scoped>
.product-card {
  background: #fff;
  border-radius: var(--border-radius-sm);
  transition: transform 0.2s;
  height: 100%;
  
  &:hover {
    transform: translateY(-2px);
  }
}

.product-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.image-container {
  position: relative;
  padding-top: 100%; // 1:1 宽高比
  overflow: hidden;
  background: #fff;
  border-radius: var(--border-radius-sm);
  
  .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-sm);
  }
}

.product-info {
  padding: var(--spacing-sm);
}

.product-title {
  margin: 0;
  margin-bottom: var(--spacing-xs);
  
  .a-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: var(--text-primary);
    height: 2.6em;
  }
}

.price-block {
  display: flex;
  align-items: flex-start;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  
  .currency {
    font-size: var(--font-size-sm);
    margin-top: 2px;
  }
  
  .whole-number {
    font-size: var(--font-size-xl);
    font-weight: 500;
  }
  
  .decimal {
    font-size: var(--font-size-sm);
    margin-top: 2px;
  }
}

.prime-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  
  .prime-icon {
    width: 42px;
    height: 12px;
    background-color: $secondary-color;
    border-radius: 2px;
  }
  
  .prime-text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
  }
}

// 响应式调整
@include respond-to('sm') {
  .product-title .a-truncate {
    font-size: var(--font-size-xs);
  }
  
  .price-block {
    .whole-number {
      font-size: var(--font-size-lg);
    }
  }
}
</style> 